<template>
  <div class="app">
    <h3>Son2 子组件</h3>
    <!--    <span>从vuex获取的值：{{$store.state.key}}</span><br>-->
    <!--    <span>从vuex getters获取的值：{{$store.getters.addUsernameSuffix}}</span><br>-->
        <span>从vuex mapGetters 获取的值：{{addUsernameSuffix}}</span><br>
    <!--    <span>从vuex user modules 获取的值：{{$store.user.state.name}}</span><br>-->
    <span>从vuex user modules 通过mapState获取的姓名：{{ name }}</span><br>
    <span>从vuex user modules 获取的年龄：{{ $store.state.user.age }}</span><br>
    <span>从vuex user modules 获取的姓名和年龄拼接无命名空间：{{ $store.getters['nameAndAgeJoin'] }}</span><br>
    <span>从vuex user modules 获取的姓名和年龄拼接：{{ $store.getters['user/nameAndAgeJoin'] }}</span><br>
    <!--    <span>从vuex获取的值：{{count}}</span>-->
    <button @click="decrease">-1</button>
    <button @click="$store.commit('user/increaseAge', 3)">修改年龄</button>
    <button @click="increaseAge(3)">通过mapMutations修改年龄</button>
  </div>
</template>

<script>
import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'

export default {
  name: 'Son2Component',
  methods: {
    decrease () {
      this.$store.commit('decrease', 2)
    },
    ...mapMutations('user', ['increaseAge']),
    ...mapActions('user', ['testAction'])
  },
  computed: {
    ...mapState('setting', ['name']),
    ...mapState('user', ['name']),
    ...mapGetters(['addUsernameSuffix'])
  }
}
</script>

<style scoped>
.app {
  border: 1px solid gray;
}
</style>
